// import React from 'react';

// function MyComponent(props) {
//   const handleClick = () => {
//     // 获取要显示的内容
//     const content = document.getElementById('targetContent').innerHTML;
//     // 创建一个新的HTML文档
//     const newWindow = window.open('', '_blank');
//     newWindow.document.write(`
//       <html>
//         <head>
//           <title>新标签页内容</title>
//         </head>
//         <body>
//           ${content}
//         </body>
//       </html>
//     `);
//     newWindow.document.close();
//   };

//   return (
//     <div>
//       <div id="targetContent">
//         {/*  这里是你想要在新标签页中显示的内容  */}
//         <h1>这是要在新标签页中显示的内容</h1>
//         <p>一些段落...</p>
//         <img src={require('../../asserts/images/avatar_mask.png')} width={300} alt="example" />
//       </div>
//       <button onClick={handleClick}>在新标签页中打开</button>
//     </div>
//   );
// }

// export default MyComponent;

import React from 'react';
import { Button } from 'antd';

const NewTabDemo = () => {
  // 打开新标签页
  const openNewTab = (url) => {
    window.open(url, '_blank'); // '_blank' 表示在新标签页打开
  };

  // 打开带参数的新标签页
  const openTabWithParams = () => {
    const params = { 
      id: 123, 
      name: '示例数据', 
      timestamp: new Date().getTime()
    };
    // 编码参数为URL查询字符串
    const queryString = new URLSearchParams(params).toString();
    window.open(`/admin/navigate-new-tab?${queryString}`, '_blank');
  };

  return (
    <div>
      <Button type="primary" onClick={() => openNewTab('https://reactjs.org')}>
        打开React官网
      </Button>
      <Button onClick={openTabWithParams}>
        打开带参数的新标签页
      </Button>
    </div>
  );
};

export default NewTabDemo;